import React from 'react';
import { Modal, Form, Input, Upload, Button, Select, Divider } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;

const PromptModal = ({ visible, onClose }) => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values:', values);
    onClose();
  };

  return (
    <Modal
      title="Create New Prompt"
      visible={visible}
      onCancel={onClose}
      footer={[
        <Button key="back" onClick={onClose}>
          Cancel
        </Button>,
        <Button key="submit" type="primary" onClick={() => form.submit()}>
          Create
        </Button>,
      ]}
      width={800}
    >
      <Form form={form} layout="vertical" onFinish={onFinish}>
        <Divider orientation="left">Upload Avatar</Divider>
        <Form.Item>
          <Upload>
            <Button icon={<UploadOutlined />}>Click or drag to upload avatar</Button>
          </Upload>
          <span style={{ marginLeft: 10 }}>Supports JPG, PNG format</span>
        </Form.Item>

        <Form.Item label="Title" name="title" rules={[{ required: true }]}>
          <Input placeholder="Enter prompt title" />
        </Form.Item>

        <Form.Item label="Description" name="description">
          <Input placeholder="Enter prompt description" />
        </Form.Item>

        <Form.Item label="Folder" name="folder">
          <Select placeholder="Select folder">
            <Option value="writing">Writing</Option>
            <Option value="editing">Editing</Option>
            <Option value="design">Design</Option>
            <Option value="marketing">Marketing</Option>
          </Select>
        </Form.Item>

        <Divider orientation="left">Prompt Content</Divider>
        <Form.Item name="content" rules={[{ required: true }]}>
          <TextArea rows={6} placeholder="Enter prompt content" />
        </Form.Item>

        <Divider orientation="left">Prompt Description</Divider>
        <Form.Item name="options">
          <Select placeholder="Select options" mode="tags">
            <Option value="test">Test</Option>
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default PromptModal;
